<template>
  <div @click.stop.prevent="" class="strcture_item_wrap" :id="`organization_${item.ID || item.FID}`">
    <div class="strcture_item" @click.stop.prevent='toggle($event,item,index)' @dblclick.stop.prevent='dbtoNewChats(item)' @contextmenu.stop.prevent="getRightMenu($event, item, index)" :ref="'item' + index">
      <img v-if="item.FID" :src="item.open?'static/image/home/filecheckicon.png':'static/image/home/fileicon.png'">

      <div v-else :class="{state_leave:item.status==3,state_busy:item.status==4,state_input_corner:item.status==5,state_meeting:item.status==6}">
        <img :onerror="defaultImg" :class="{gray:item.status==7}" class="strcture_head img-border"
          :src="!$isNull(item.HEAD)?(`${$store.state.headPathUrl}${item.ID}${item.HEAD}.PNG`):`static/image/home/person_${item.SEX==2?2:1}.png`">
      </div>
      <span :class='{marginLeft:!isOrg || !isHave}' :ref="item.FID">{{item.LEABLE + (item.CN ? '(' + (item.online?item.online:0) + '/' + item.CN + ')' : '')}}</span>
    </div>
    <ul v-show='item.open' v-if='isHave&&item.child'>
      <my-tree v-for='(cell,tag) in item.child' :item='cell' :key="(item.FID||item.ID)+tag" :index="tag" @getRightMenu="getRightMenuInTree" @cancelRightMenu="cancelRightMenuFromTree"></my-tree>
    </ul>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getGroup } from "@/api/structureList.js";
export default {
  name: "myTree",
  props: ["item", "index", "searchUserList"],
  data() {
    return {
      SearchValue: "",
      isHave: false,
      open: false,
      isOrg: false,
      personsExitsArr: [],
      personsCheckArr: [],
      defaultImg:
        'this.src="' + require("../../../static/image/home/person_1.png") + '"',
    };
  },
  watch: {
    updateUserStatus() {
      if (this.item.NO == this.updateUserStatus.userId) {
        this.item.status = null;
        this.item.status = this.updateUserStatus.status;
      }
      this.$forceUpdate();
    },
  },
  computed: {
    ...mapState(["updateUserStatus", "anchorPosition_organization"]),
  },
  methods: {
    toggle(event, item, index) {
      this.$emit("cancelRightMenu", item);
      if (item.NO) {
        window.tonextstr(event, item, index);
      } else if (item.FID) {
        this.$set(item, "open", !item.open);
        let isTrue = item.checked;
        // 点击重新获取数据,考虑到可能需及时获取在线状态,取消注释只获取一次 loading_structure
        // if(!item.child) {
        if (item.open) {
          this.$startLoading(".loading_structure");
          getGroup({ fid: item.FID }).then((msg) => {
            this.$endLoading();
            msg = msg.data;
            // console.log(msg,'组织架构');
            for (let i in msg) {
              msg[i].checked = isTrue;
              if (this.personsExitsArr.length > 0) {
                for (let t in this.personsExitsArr) {
                  if (
                    this.personsExitsArr[t].ID == msg[i].NO ||
                    this.personsExitsArr[t].ID == msg[i].FID
                  ) {
                    msg[i].isExits = true;
                  }
                }
              }
              if (this.personsCheckArr.length > 0) {
                for (let t in this.personsCheckArr) {
                  if (
                    this.personsCheckArr[t].value == msg[i].NO ||
                    this.personsCheckArr[t].value == msg[i].FID
                  ) {
                    msg[i].checked = true;
                  }
                }
              }
            }
            this.$set(item, "child", msg);
            // 新增下载头像
            window.loadingUserList(msg);
            this.$forceUpdate();
          });
        }
      }
    },
    dbtoNewChats(item) {
      window.dbtoNewChats(item, false);
      this.$emit("cancelRightMenu");
    },
    getRightMenu($event, item, index) {
      if (!item.FID) {
        this.$emit("cancelRightMenu");
        return;
      }
      let top = this.$refs[`item${index}`].offsetTop + 20;
      let left =
        this.$refs[`${item.FID}`].offsetLeft +
        this.$refs[`${item.FID}`].offsetWidth;
      this.$emit("getRightMenu", { $event, item, top, left });
    },
    getRightMenuInTree({ $event, item, top, left }) {
      if (!item.FID) {
        this.$emit("cancelRightMenu");
        return;
      }
      this.$emit("getRightMenu", { $event, item, top, left });
    },
    cancelRightMenuFromTree(item) {
      this.$emit("cancelRightMenu", item);
    },
    searchFn() {
      console.log(11);
    },
  },
  created() {
    this.isHave = this.item.FID ? true : false;
  },
  updated() {
    this.$nextTick(() => {
      let domID = "#organization_" + this.anchorPosition_organization;
      if (document.querySelector(domID)) {
        document.querySelector(domID).scrollIntoView(true);
        this.$store.commit("Anchor_Position_Organization", null);
      }
    });
  },
};
</script>

<style scoped>

</style>